<template>
  <div class="goods">
    <div class="scroll-nav-wrapper">
      <cube-scroll-nav v-if="goods.length" :side="true" :data="goods" :options="scrollOptions">
        <template slot="bar" slot-scope="props">
          <cube-scroll-nav-bar
            direction="vertical"
            :labels="props.labels"
            :current="props.current"
            :txts="barTxts"
          >
            <template slot-scope="props">
              <div class="nav-bar-tit">
                <support-ico v-if="props.txt.type > 0" :size="3" :type="props.txt.type"></support-ico>
                <span class="txt">{{props.txt.name}}</span>
                <bubble v-show="props.txt.count" :num="props.txt.count"></bubble>
              </div>
            </template>
          </cube-scroll-nav-bar>
        </template>
        <cube-scroll-nav-panel
          v-for="(good,index) in goods"
          :label="good.name"
          :key="index"
          :title="good.name"
        >
          <ul class="food">
            <li class="food-item" v-for="(food,index) in good.foods" :key="index" @click="showFoodDetail(food)">
              <div class="icon">
                <img width="57" height="57" :src="food.icon" />
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p v-show="food.description" class="desc">{{food.description}}</p>
                <div class="extra">月售{{food.sellCount}}份 好评率{{food.rating}}</div>
                <div class="price">
                  <span class="now">￥{{food.price}}</span>
                  <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                </div>
                <cart-control :food="food" @add="onAdd"></cart-control>
              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
    <div class="shop-cart-wrapper">
      <shop-cart
        ref="shopCart"
        :min-price="minPrice"
        :delivery-price="deliveryPrice"
        :selected-foods="selectedFoods"
        :fold="true"
      ></shop-cart>
    </div>
  </div>
</template>
<script>
import { getGoods } from '../../api/index'
import ShopCart from '../shop-cart/shop-cart.vue'
import CartControl from '../cart-control/cart-control.vue'
import SupportIco from '../support-ico/support-ico.vue'
import Bubble from '../bubble/bubble.vue'
export default {
  name: 'goods',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      goods: [],
      scrollOptions: {
        click: false, // 不设置为false会点击俩次，底层用的是better-scroll，所以设置click为false
        directionLockThreshold: 0 // 当我们需要锁定只滚动一个方向的时候，我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差，当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。
      },
      selectedFood: {}
    }
  },
  computed: {
    minPrice() {
      return this.data.seller.minPrice
    },
    deliveryPrice() {
      return this.data.seller.deliveryPrice
    },
    selectedFoods() {
      let ret = []
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count > 0) {
            ret.push(food)
          }
        })
      })
      return ret
    },
    barTxts() {
      const ret = []
      this.goods.forEach((good) => {
        const type = good.type
        const name = good.name
        const foods = good.foods
        let count = 0
        foods.forEach((food) => {
          count += food.count || 0
        })
        ret.push({
          type,
          name,
          count
        })
      })
      return ret
    }
  },
  methods: {
    fetch() {
      if (!this.fetched) {
        this.fetched = true
        getGoods({
          id: this.data.seller.id
        }).then((goods) => {
          this.goods = goods
        })
      }
    },
    onAdd(el) {
      this.$refs.shopCart.drop(el)
    },
    showFoodDetail(food) {
      this.selectedFood = food
      this._showFoodComp()
      this._showShopCartSticky()
    },
    _showFoodComp() {
      this.foodComp = this.foodComp || this.$createFood({
        $props: {
          food: 'selectedFood'
        },
        $events: {
          add: (el) => {
            this.shopCartStickyComp.drop(el)
          },
          leave: () => {
            this._hideShopCartSticky()
          }
        }
      })
      this.foodComp.show()
    },
    _showShopCartSticky() {
      this.shopCartStickyComp = this.shopCartStickyComp || this.$createShopCartSticky({
        $props: {
          minPrice: 'minPrice',
          deliveryPrice: 'deliveryPrice',
          selectedFoods: 'selectedFoods',
          fold: true
        }
      })
      this.shopCartStickyComp.show()
    },
    _hideShopCartSticky() {
      this.shopCartStickyComp.hide()
    }
  },
  components: {
    ShopCart,
    CartControl,
    SupportIco,
    Bubble
  }
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

.goods
  position relative
  height 100%
.scroll-nav-wrapper
  position absolute
  top 0
  bottom 48px
  width 100%
  >>> .cube-scroll-nav-bar
    width 80px
    background $color-background-ssss
    .cube-scroll-nav-bar-item
      display flex
      align-items center
      position relative
      height 54px
      padding 0 8px
      font-size $fontsize-small
      border-bottom solid 1px $color-row-line
      .nav-bar-tit
        display inline-block
        text-align left
        .support-ico
          margin-right 2px
        .txt
          line-height 14px
          white-space normal
          text-align left
          vertical-align top
        .bubble
          position absolute
          top 4px
          right 0
    .cube-scroll-nav-bar-item_active
      background $color-white
      color $color-red
      border-bottom none
  >>> .cube-scroll-wrapper
    .cube-scroll-nav-panel-title
      padding 6px 0
      text-indent 14px
      border-left solid 2px #d9dde1
      font-size $fontsize-small
      color $color-text-ss
      background $color-background-ssss
  .food-item
    display flex
    padding 18px 0
    margin 0 18px
    border-bottom solid 1px $color-row-line
    &:last-child
      border-bottom none
    .icon
      margin-right 10px
      img
        border-radius 2px
    .content
      flex 1
      position relative
      overflow hidden
      .name
        line-height 14px
        font-size $fontsize-medium
        color $color-text
        margin-bottom 8px
      .desc
        line-height 12px
        font-size $fontsize-small-s
        color $color-text-ss
        margin-bottom 8px
        truncate()
      .extra
        font-size $fontsize-small-s
        color $color-text-ss
        margin-bottom 8px
      .price
        .now
          line-height 24px
          font-size $fontsize-medium
          color $color-red
          font-weight 700
          margin-right 8px
        .old
          line-height 24px
          text-decoration: line-through
          font-size $fontsize-small-s
          color $color-text-ss
          font-weight 700
      .cartcontrol
        position absolute
        right 0
        bottom 0
.shop-cart-wrapper
  position absolute
  z-index 9
  width 100%
  bottom 0
</style>
